class CollapseItem extends HTMLElement {
  constructor() {
    super();

    const shadow = this.attachShadow({mode: 'open'});
    const template = document.getElementById('myCollapseItem');
    const templateClone = template.content.cloneNode(true);
    const style  = document.createElement('style');
    style.textContent = `
      :host {
        width: 100%;
      }
      .title {
        background: #f1f1f1;
        line-height: 35px;
        font-size: 30px; 
        height: 35px;
        width: 100%;
      }
      .content {
        font-size: 14px;
      }
    `;
    shadow.appendChild(style);
    shadow.appendChild(templateClone);
    this.titleElement = shadow.querySelector('.title');
    this.isShow = true;
    this.titleElement.addEventListener('click', (e) => {
      // 组件通信 子传父
      console.log(this.isShow, this.name)
      document.querySelector('my-collapse').dispatchEvent(new CustomEvent('changeName', {
        detail: {
          isShow: this.isShow,
          name: this.name
        }
      }))
    })
  }

  //  生命周期
  static get observedAttributes() { // 监控属性变化
    return ['active', 'name', 'title'];
  }

  attributeChangedCallback(key, oldVal, newVal) {
    switch (key) {
      case 'active':
        this.activeList = JSON.parse(newVal);
        break;
      case 'title':
        this.titleElement.innerHTML = newVal;
        break;
      case 'name':
        this.name = newVal;
    }

    if (this.activeList && this.name) {
      this.isShow = this.activeList.includes(this.name);
      this.shadowRoot.querySelector('.content').style.display = this.isShow ? 'block' : 'none';
    }

  }
}

export default CollapseItem;